<!DOCTYPE html>
<html>
<head>
    {{template "header"}}
</head>
<body>
<script>

    webix.ready(function () {
        let queryid = webix.uid().toString()
        let tableid = webix.uid().toString()
        let reloadData = wxui.reloadDataFunc(tableid, "/admin/loki/query", queryid)
        webix.ui({
            css: "main-panel",
            padding: 7,
            rows: [
                wxui.getPageToolbar({
                    title: gtr("logging"),
                    icon: "mdi mdi-file-document",
                    elements: [],
                }),
                wxui.getTableQueryCustomForm(queryid, [
                    {
                        rows: [
                            {
                                cols: [
                                    {
                                        view: "datepicker",
                                        timepicker: true,
                                        name: "starttime",
                                        label: gtr("Time From"),
                                        labelWidth: 80,
                                        width: 260,
                                        stringResult: true,
                                        format: "%Y-%m-%d %H:%i",
                                        css: "nborder-input",
                                        value: webix.Date.add(new Date(), -1, "day"),
                                        editable: true
                                    },
                                    {
                                        view: "datepicker",
                                        timepicker: true,
                                        name: "endtime",
                                        label: gtr("to"),
                                        labelWidth: 40,
                                        stringResult: true,
                                        format: "%Y-%m-%d %H:%i",
                                        css: "nborder-input",
                                        value: new Date(),
                                        editable: true
                                    },
                                    {
                                        view: "combo", name: "job", label: tr("logging", "Job"), value: "toughradius",
                                        options: ["toughradius", "toughedge"], labelWidth: 80,
                                        on: {
                                            onChange: function (newv, oldv) {
                                                $$("query_job_id").setValue(newv)
                                            }
                                        }
                                    },
                                    {
                                        view: "combo", name: "namespace", labelWidth: 100, label: tr("logging", "Namespace"),
                                        value: "global", options: ["global", "radius", "tr069"]
                                    },
                                ]
                            },
                            {
                                cols: [
                                    {
                                        view: "combo",
                                        name: "level",
                                        label: tr("logging", "Level"),
                                        labelWidth: 80,
                                        value: "info",
                                        options: ["info", "debug", "error", "warn"]
                                    },
                                    {
                                        view: "search", name: "keyword", placeholder: tr("logging", "Keyword")
                                    },
                                    {
                                        view: "text", name: "keyreg", placeholder: tr("logging", "Regular match")
                                    },
                                    {
                                        view: "counter", name: "limit", label: tr("logging", "Limit"), min: 1, max: 10000, value: 1000, step: 100
                                    },
                                    {
                                        view: "button",
                                        label: tr("logging", "Query"),
                                        css: "webix_transparent",
                                        type: "icon",
                                        icon: "mdi mdi-search-web",
                                        borderless: true,
                                        width: 70,
                                        click: function () {
                                            reloadData()
                                        }
                                    }
                                ]
                            }
                        ]
                    },
                ]),
                wxui.getDatatable({
                    tableid: tableid,
                    columns: [
                        {
                            id: "level", header: [""], headermenu: false, template: function (obj) {
                                if (obj.level === "info") {
                                    return "<i class='mdi mdi-file-document' style='color: blue'></i>"
                                }

                                if (obj.severity === "error") {
                                    return "<i class='mdi mdi-file-document' style='color: red'></i>"
                                }

                                if (obj.severity === "warn") {
                                    return "<i class='mdi mdi-file-document' style='color: orange'></i>"
                                }

                                return "<i class='mdi mdi-file-document' style='color: gray'></i>"

                            }, adjust: true
                        },
                        {id: "job", header: [tr("logging", "Job")], adjust: true},
                        {id: "caller", header: ["Caller"], adjust: true, hidden:true},
                        {id: "timestamp", header: ["Timestamp"], width: 220,},
                        {
                            id: "short_message",
                            header: [tr("logging", "Message")],
                            template: "<a class='do_detail' href='javascript:void(0)'><i class='mdi mdi-eye' style='color: blue'></i></a> #short_message#",
                            fillspace: true
                        }
                    ],
                    rightSplit: 0,
                    pager: true,
                    on: {
                        onItemDblClick: function (id, e, node) {
                            let ditem = this.getItem(id)
                            let msg = JSON.stringify(ditem, null, 4)
                            wxui.displayTableMessage(node, this.$width - 64, 240, msg, "javascript")
                        }
                    },
                    onClick: {
                        "do_detail": function (e, id, node) {
                            let ditem = this.getItem(id)
                            let msg = JSON.stringify(ditem, null, 4)
                            wxui.displayTableMessage(node, this.$width - 64, 240, msg, "javascript")
                        }
                    }
                }),
                wxui.getTableFooterBar({
                    tableid: tableid,
                    actions: [],
                    callback: reloadData
                }),
            ]
        })
    })
</script>
</body>
</html>